/* eslint-disable indent */
<template>
  <div class='comment-records-wechat-wrapper'>
    <div class='comment-records-wechat-avatar'>
      <img :src="record.avatar" v-show='record.avatar'>
    </div>
    <div class='comment-records-wechat-detail'>
      <div class='detail-title'>
        <span class='detail-title-nickname'>{{record.msgNickname}}</span>
        <span class='detail-title-selectness' v-show='record.isSelectness'>精品</span>
        <span class='detail-title-time'>{{formatCommentTime(record.createTime)}}</span>
        <span class='detail-title-thumbup' @click='praiseMessage' :class='{self: isSelf}'>
          <i :class='{iconfont: true, active: record.hasThumbUp}'>&#xe665;</i>
          <i :class='{iconfont: true, active: true, dynamic: true, move: isMove}'  >&#xe665;</i>
          <span :class="{active: record.hasThumbUp}" class='text'>{{record.likenum || '点赞'}}</span>
        </span>
      </div>
      <div class='detail-content'>{{record.msgContent}}</div>
      <div class='detail-delete' v-show='isSelf' @click='startToDeleteComment'>删除</div>
      <ul class='detail-sub-list'>
        <li class='detail-sub-item' v-for='(subRecord, index) of record.children' :key='"subComment" + index'>
          <div class='detail-sub-title'>
            <span class='detail-sub-nickname' v-show='subRecord.openid !== "-1"'>{{subRecord.msgNickname}}</span>
            <span class='detail-sub-official' v-show='subRecord.openid === "-1"'>{{subRecord.msgNickname}}</span>
            <span class='detail-sub-time'>{{formatCommentTime(subRecord.createTime)}}</span>
          </div>
          <div class='detail-sub-content'>{{subRecord.msgContent}}</div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { Dialog } from 'vant'
export default {
  name: 'commentRecords',
  components: {
  },
  data () {
    return {
      startReply: false,
      isSelf: false,
      info: {},
      flag: false,
      isMove: false
    }
  },
  props: {
    record: {
      type: Object,
      default () {
        return {}
      }
    },
    knowledegId: {
      type: String,
      default: ''
    },
    classify: {
      type: String,
      default: ''
    }
  },
  methods: {
    praiseMessage () {
      if (this.flag) {
        return false
      }
      this.flag = true
      if (!this.record.hasThumbUp) {
        let url = `${this.SERVICE_PORTAL}/Knowledge/${this.classify}/${this.knowledegId}/meg/thumbUp`
        let param = {
          cancel: false,
          msgId: this.record.msgId,
          nickName: localStorage.getItem('fansNickName') || '',
          openid: sessionStorage.getItem('openid'),
          wxAppid: sessionStorage.getItem('appid')
        }
        this.$post(url, param).then(res => {
          if (res.code === 200) {
            this.record.hasThumbUp = !this.record.hasThumbUp
            this.record.likenum++
            this.flag = false
            this.isMove = true
            setTimeout(() => {
              this.isMove = false
            }, 2000)
          }
        })
      } else {
        let url = `${this.SERVICE_PORTAL}/Knowledge/${this.classify}/${this.knowledegId}/meg/thumbUp`
        let param = {
          cancel: true,
          msgId: this.record.msgId,
          nickName: localStorage.getItem('fansNickName') || '',
          openid: sessionStorage.getItem('openid'),
          wxAppid: sessionStorage.getItem('appid')
        }
        this.$post(url, param).then(res => {
          if (res.code === 200) {
            this.record.hasThumbUp = !this.record.hasThumbUp
            this.record.likenum--
            this.flag = false
          }
        })
      }
    },
    sendReply (text) {
      // alert(text)
      this.startReply = false
    },
    init () {
      let openid = sessionStorage.getItem('openid')
      if (this.record.openid === openid) {
        this.isSelf = true
      }
    },
    startToDeleteComment () {
      Dialog.confirm({
        message: '确定删除此条留言吗？'
      }).then(() => {
        this.deleteComment()
      }).catch(() => {})
    },
    deleteComment () {
      this.$emit('delete', this.record)
    }
  },
  created () {
    this.init()
  }
}
</script>

<style scoped lang='stylus'>
@keyframes mymove {
  0% {
    opacity 1
  }
  100% {
    top -20px
    opacity 0
  }
}
.comment-records-wechat-wrapper
  display flex
  .comment-records-wechat-avatar
    flex none
    width 34px
    height 34px
    border-radius 6px
    background #ddd
    overflow hidden
    transform rotate(0deg)
    img
      width 100%
      height 100%
  .comment-records-wechat-detail
    padding-left 10px
    flex 1
    width 0
    .detail-title
      font-size 0
      margin-bottom 8px
      display flex
      align-items flex-end
      padding-top 4px
      .detail-title-nickname
        font-size 12px
        margin-right 10px
        color rgba(35,25,23,0.6)
        font-weight 400
        noWrap()
      .detail-title-selectness
        flex none
        font-size 10px
        line-height 10px
        padding 2px 4px
        color #dacd67
        background #fff
        margin-right 10px
      .detail-title-time
        flex-shrink 0
        flex-grow 1
        font-size 10px
        color #aaa
        margin-right 10px
      .detail-title-thumbup
        font-size 0
        position relative
        flex none
        .dynamic
          position absolute
          color #6ec4e9
          opacity 0
          top 0
          left 0
          &.move
            animation mymove 2s 1
        &.self
          .iconfont, .text
            color #C9CACA
        .iconfont
          color #C9CACA
          font-size 13px
          margin-right 4px
          &.active
            color #578099
        .text
          font-size 13px
          color #C9CACA
          &.active
            color #202125
    .detail-content
      font-size 14px
      font-weight 500
      color #202125
      line-height 21px
      text-align justify
    .detail-delete
      color #E55907
      font-size 14px
      margin-top 8px
    .detail-reply
      font-size 11px
      color #aaa
    .detail-reply-input
      padding-right 30px
    .detail-sub-list
      margin-top 12px
      .detail-sub-item
        border-left 2px solid #CCCCCC
        padding-left 8px
        margin-bottom 14px
        .detail-sub-title
          display flex
          align-items flex-end
          margin-bottom 8px
          .detail-sub-nickname
            noWrap()
            font-size 12px
            font-weight 400
            color #231917
            margin-right 10px
          .detail-sub-official
            border 1px solid #26a87a
            font-size 12px
            font-weight 400
            color #26a87a
            margin-right 10px
            border-radius 2px
            padding 1px
          .detail-sub-time
            flex none
            font-size 10px
            color #aaa
        .detail-sub-content
          font-size 14px
          font-weight 400
          color #202125
          line-height 21px
</style>
